<template>
  <div class="common-layout">
    <n-space vertical size="large">
      <n-layout>
        <n-layout-header>
          <div class="header_left">
            <img src="../../assets/logo.png" alt="" />
          </div>
          <div class="header_right">
            <el-dropdown>
              <span class="el-dropdown-link">
                <img src="../../assets/favicon.png" alt="">
                admin
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="CirclePlusFilled" @click="goLigin()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </n-layout-header>
        <n-layout has-sider>
          <n-layout-sider content-style="min-width: 210px;color:#fff">
            <n-menu :options="menuOptions" />
          </n-layout-sider>
          <n-layout-content>
            <div class="crumb">
              <Breadcrumb :list="routePath"></Breadcrumb>
            </div>
            <div class="view" style="padding: 24px;" :locale="zhCN" :date-locale="dateZhCN">
              <RouterView style="background: white;" />
            </div>
          </n-layout-content>
        </n-layout>
      </n-layout>
    </n-space>
  </div>
</template>
<script setup lang="ts">
import Breadcrumb from "@/components/Breadcrumb/Breadcrumb.vue";
import { ArrowDown, CirclePlusFilled } from '@element-plus/icons-vue'
import { menuOptions } from "./home";
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from 'vue-router';
import { zhCN, dateZhCN } from 'naive-ui'
import { ElMessage } from "element-plus";
const router = useRouter()
const goLigin = () => {
  ElMessage({
    message: '退出登录成功！',
    type: 'success',
  })
  setTimeout(() => {
    sessionStorage.removeItem('token')
    router.push('/login')
  }, 1000);
}
interface IPath {
  [x: string]: any;
}
// 面包屑数据
let routePath = ref<IPath[]>([])
const route = useRoute()
watch(
  () => route.matched,
  (newValue: any) => {
    routePath.value = newValue
  },
  { immediate: true }
)

</script>
<style lang="scss" scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

::v-deep .el-dropdown {
  color: #fff;

  span {
    display: flex;
    outline: none;
    align-items: center;
    font-size: 18px;

    img {
      width: 30px !important;
    }
  }
}

.crumb {
  width: 100%;
  background: white;
  height: 50px;
}

::v-deep .el-breadcrumb {
  padding-top: 19px;
  padding-left: 10px;
}

* {
  margin: 0;
  padding: 0;
}

::v-deep .n-layout-header {
  background: #202741;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header_right {
    img {
      width: 20px;
      margin-right: 10px;
      border-radius: 50%;
    }
  }
}

::v-deep .n-button {
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

::v-deep .n-layout-sider {
  max-width: 188px !important;
  height: calc(100vh - 70px);
  background: #323a52;
}

::v-deep .n-menu .n-menu-item-content .n-menu-item-content-header {
  color: #fff !important;
}

::v-deep .n-menu .n-menu-item-content .n-menu-item-content__icon {
  color: #fff !important;
}

::v-deep .n-menu .n-menu-item-content .n-menu-item-content__arrow {
  color: #fff !important;
}

::v-deep .n-menu .n-menu-item-content .n-menu-item-content-header a {
  color: #fff !important;
}

::v-deep .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
  background-color: #2c9ff8 !important;
}

::v-deep .n-menu .n-menu-item-content.n-menu-item-content--selected::before {
  background-color: #2c9ff8 !important;
}

::v-deep .n-layout-header[data-v-7a7a37b1] {
  padding: 20px !important;
  background: #202741;
  color: #fff;
  font-size: 20px;
  font-family: STCaiyun;
  font-weight: bold;
}

.n-layout-content {
  background: #b4b4b4;
}
</style>
